.bg {
    background-color: var(--sapBackgroundColor);
}

:not(:defined) {
    display: none;
}
.banner {height: 1rem;container-type: inline-size; margin: 1rem 0}
.banner-inner {height: 1rem;background-color: red;}
@container (max-width: 600px) {.banner-inner {background-color: darkred;}}
@container (width > 600px) and (width <= 1024px) {.banner-inner {background-color: red;}}
@container (width > 1024px) and (width <= 1440px) {.banner-inner {background-color: orange;}}
@container (min-width: 1441px) {.banner-inner {background-color: yellow;}}

.text {
    display: inline-block;
    box-sizing: border-box;
    white-space: pre-line;
    word-wrap: break-word;
    cursor: text;
    font-size: .875rem;
    font-family: var(--sapFontFamily);
    line-height: normal;
    color: var(--sapTextColor);
}

    ui5-title {
    margin-bottom: 2rem;
}

.controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.controls > * {
    margin: 0 0.25rem;
}